UserCSS - 顯示行數

code:style.css

/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */

@media screen and (min-width: 768px) {

.editor .lines { counter-reset: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.editor .line:not(.line-title) { counter-increment: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.app:not(.presentation) .editor .line:not(.line-title)::before {

content: counter(line);

position: absolute; display: inline-block; left: -110px; z-index: 10;

min-width: 50px; text-align: right; vertical-align: middle;

/* 行番号のフォントとか色とかの指定はここ */

font-family: monospace; color: grey }

/* カーソル行の行番号を濃く表示する */

.editor .line:not(.line-title)::before { opacity: .5 }

.editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }

code:style.css

/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */

@media screen and (min-width: 768px) {

.section-title {

counter-reset: codeline;

}

.code-block span.indent code.code-body {

counter-increment: codeline;

margin-left: -1.5em;

padding-left: 2.3em;

}

.code-block span.indent code.code-body::before {

content: counter(codeline);

position: absolute;

display: inline-block;

z-index: 10;

margin-left: -2.4em;

width: 2em;

padding-right: 0.2em;

text-align: right;

vertical-align: bottom;

text-wrap: nowrap;

white-space: nowrap;

}

/* カーソル行の行番号を濃く表示する */

.code-block span.indent code.code-body::before {

opacity: .5;

}

.cursor-line .code-block span.indent code.code-body::before {

opacity: 1;

font-weight: bolder;

}

}